<template>
  <div class="bar-chart-02 chart" ref="barChart02"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart02 = ref(null);
const echarts = inject('$echarts');

let setData = function (data, constData, showData) {
  data.filter(function (item) {
    if (item) {
      constData.push(1);
      showData.push(item);
    } else {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 2,
            color: 'rgba(0,0,0,0)',
          },
        },
      });
    }
  });
};
// 组织颜色
let setColor = function (colorArr) {
  let color = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
      x: 0,
      x2: 0,
      y: 0,
      y2: 1, */
    colorStops: [{
      offset: 0,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[0],
    },
    {
      offset: 0.5,
      color: colorArr[1],
    },
    {
      offset: 1,
      color: colorArr[1],
    },
    ],
  };
  return color;
};

let vehicle = [45, 25, 48, 62, 35];
let controlBall = [23, 12, 52, 14, 9];

let constData1 = [];
let showData1 = [];


let constData2 = [];
let showData2 = [];

setData(vehicle, constData1, showData1);
setData(controlBall, constData2, showData2);

let colorArr1 = ['#00AEFF', '#0078E8', '#4FDFFF'];
let colorArr2 = ['#FBDF6D', '#FFB85C', '#EFB66C'];

let color1 = setColor(colorArr1);
let color2 = setColor(colorArr2);

const option = {
  compCode: 'C202403001',
  backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    show: false
  },
  grid: {
    top: '15%',
    bottom: '15%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#FFFFFF'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#1B3F66'
      }
    },
    axisTick: {
      show: false
    },
    data: [
      '2024-01',
      '2024-02',
      '2024-03',
      '2024-04',
      '2024-05'
    ]
  },
  yAxis: [{
    type: 'value',
    name: '万元',
    nameTextStyle: {
      color: '#FFFFFF'
    },
    axisLabel: {
      show: true,
      formatter: '{value}', // 右侧Y轴文字显示
      textStyle: {
        color: '#fff',
      },
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#1B3F66'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#1B3F66'
      }
    }
  }, {
    type: 'value',
    name: '套',
    nameTextStyle: {
      color: '#FFFFFF'
    },
    position: 'right',
    axisLabel: {
      show: true,
      formatter: '{value}', // 右侧Y轴文字显示
      textStyle: {
        color: '#fff',
      },
    }

  }],
  series: [{
    z: 1,
    type: 'bar',
    name: '应缴租金',
    barGap: '20%', // 相邻柱子间距
    barWidth: 20,
    itemStyle: {
      borderRadius: [0, 0, 0, 0],// 柱子四周圆角
      color: color1// 柱子左右颜色（深，浅）
    },
    data: vehicle // Y轴上的高度
  },
  {
    z: 2,
    name: '应缴租金',
    type: 'pictorialBar',
    barWidth: 20,
    data: constData1,// 此数据对应底部组件
    symbol: 'diamond',// 底部组件形状，不写默认为椭圆
    symbolOffset: ['-58%', '50%'],// 与柱子的偏移角度
    symbolSize: [22, 10],// 底面[宽，高]
    itemStyle: {
      normal: {
        color: color1// 底面左右颜色（深，浅）
      },
    },
    tooltip: {
      show: false,
    },
  },
  {
    z: 3,
    name: '应缴租金',
    type: 'pictorialBar',
    barWidth: 20,
    symbolPosition: 'end',
    data: showData1,// 此数据对应顶部组件
    symbol: 'diamond',
    symbolOffset: ['-58%', '-50%'],
    symbolSize: [22, 10],
    itemStyle: {
      normal: {
        /* borderColor: colorArr1[2],
          borderWidth: 2, */ // 加上棱角分明
        color: colorArr1[2]
      },
    },
    tooltip: {
      show: false,
    },
  },
  {
    z: 1,
    type: 'bar',
    name: '实缴租金',
    barWidth: 20,
    itemStyle: {
      borderRadius: [0, 0, 0, 0],
      color: color2
    },
    data: controlBall
  },
  {
    z: 2,
    name: '实缴租金',
    type: 'pictorialBar',
    barWidth: 20,
    data: constData2,
    symbol: 'diamond',
    symbolOffset: ['58%', '50%'],
    symbolSize: [22, 10],
    itemStyle: {
      normal: {
        color: color2
      },
    },
    tooltip: {
      show: false,
    },
  },
  {
    z: 3,
    name: '实缴租金',
    type: 'pictorialBar',
    barWidth: 20,
    symbolPosition: 'end',
    data: showData2,
    symbol: 'diamond',
    symbolOffset: ['58%', '-50%'],
    symbolSize: [22, 10],
    itemStyle: {
      normal: {
        /* 	borderColor: colorArr2[2],
          borderWidth: 2, */
        color: colorArr2[2]
      },
    },
    tooltip: {
      show: false,
    },
  },
  {
    name: '应缴套数',
    type: 'line',
    smooth: true, // 平滑曲线显示
    // showAllSymbol: true, //显示所有图形。
    // symbol: "circle", //标记的图形为实心圆
    // symbolSize: 10, //标记的大小
    lineStyle: {
      color: '#A4DAFF',
    },
    showSymbol: false,
    areaStyle: {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: '#A4DAFF'
        },
        {
          offset: 1,
          color: 'transparent'
        }
      ]),
    },
    data: [23, 12, 52, 14, 9],
  }, {
    name: '实缴套数',
    type: 'line',
    smooth: true, // 平滑曲线显示
    // showAllSymbol: true, //显示所有图形。
    // symbol: "circle", //标记的图形为实心圆
    // symbolSize: 10, //标记的大小
    lineStyle: {
      color: '#FFE99F',
    },
    showSymbol: false,
    areaStyle: {
      opacity: 0.8,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: '#FFE99F'
        },
        {
          offset: 1,
          color: 'transparent'
        }
      ]),
    },
    data: [3, 22, 42, 24, 39],
  }]
};

onMounted(() => {
  const chart = echarts.init(barChart02.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
